<template>
	<view class="content">
		<view class="site1" v-if="JSON.stringify(address) === '{}'">
			<view class="site1-title">收货地址</view>
			<view class="site1-content">
				<view class="site-content1" @click="chooseAddress">
					请添加收货地址
				</view>
				<view class="site1-content2">
					<image src="../../static/mall/indet6.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 地址 -->
		<view class="site" v-else>
			<view class="site-name">
				<view class="site-name1">无辣不欢</view>
				<view class="site-name2">168 8829 3743</view>
			</view>
			<view class="site-content">
				<view class="site-content-icon">
					<image src="../../static/indet/indet4.png" mode=""></image>
				</view>
				<view class="site-content-site">
					山东省济南市先行区王大佬庄183号无名氏街道蛋蛋花园一号楼12单元1128
				</view>
				<view class="site-content-icon2">
					<image src="../../static/indet/indet6.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-addres",
		data() {
			return {
				 // 收货地址
				      address: {},
			};
		},
		methods: {
		  // 选择收货地址
		  async chooseAddress() {
		    // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
		    //    返回值是一个数组：第 1 项为错误对象；第 2 项为成功之后的收货地址对象
		    const [err, succ] = await uni.chooseAddress().catch(err => err)
		
		    // 2. 用户成功的选择了收货地址
		    if (err === null && succ.errMsg === 'chooseAddress:ok') {
		      // 为 data 里面的收货地址对象赋值
		      this.address = succ
			  console.log( this.address)
			  
		    }
		  }
		}
	}
</script>

<style lang="scss">
.content {
	width: 722rpx;
	background-color: #f5f5f5;
	.site1 {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		
		margin: 25rpx;
		.site1-title {
			margin: 43rpx 0 21rpx 25rpx;
			font-size: 32rpx;
			font-weight: 600;
		}
		.site1-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 25rpx 43rpx 25rpx;
			.site-content1 {
				font-size: 21rpx;
				color: #afafaf;
			}
			.site1-content2 {
				width: 18rpx;
				height: 25rpx;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
	// 地址信息
	.site {
		background-color: #FFFFFF;
		border-radius: 14rpx;
		margin: 25rpx;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.site-name {
			display: flex;
			flex-direction: row;
			justify-content: space-left;
			margin: 27rpx 108rpx 9rpx 108rpx;
			.site-name1 {
				font-size: 28rpx;
				font-weight: 600;
			}
			.site-name2 {
				font-size: 21rpx;
				color: #626262;
				margin-left: 14rpx;
			}
		}
		.site-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			.site-content-icon {
				width: 65rpx;
				height: 65rpx;
				margin: 0 27rpx 25rpx  27rpx ;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
			.site-content-site {
				font-size: 21rpx;
				color: #626262;
			}
			.site-content-icon2 {
				width: 18rpx;
				height: 25rpx;
				margin-right: 25rpx;
				image {
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
	}
}
</style>
